<!doctype html>
<!--
@license
Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
  <meta charset="utf-8">
  <script src="../../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
  <script src="wct-browser-config.js"></script>
  <script src="../../node_modules/wct-browser-legacy/browser.js"></script>
  <script type="module" src="../../polymer-legacy.js"></script>
</head>
<body>

<dom-module id="has-whitespace">

  <template> <div>A</div> <div>B</div> </template>

  <script type="module">
import { Polymer } from '../../polymer-legacy.js';
Polymer({
  is: 'has-whitespace'
});
</script>

</dom-module>



<dom-module id="no-whitespace">

  <template strip-whitespace>
    <div>A</div>
    <div>A</div>
    <div>B</div>
  </template>

  <script type="module">
import { Polymer } from '../../polymer-legacy.js';
Polymer({
  is: 'no-whitespace'
});
</script>

</dom-module>



<dom-module id="no-whitespace-style">

  <template strip-whitespace>
    <style>
      :host {
        display: block;
      }
    </style>
    <div>A</div>
    <div>B</div>
  </template>

  <script type="module">
import { Polymer } from '../../polymer-legacy.js';
Polymer({
  is: 'no-whitespace-style'
});
</script>

</dom-module>

<dom-module id="no-whitespace-nested">

  <template strip-whitespace>
    <div>
      <div>A</div>
    </div>
    <div>
      <div>B</div>
    </div>
  </template>

  <script type="module">
import { Polymer } from '../../polymer-legacy.js';
Polymer({
  is: 'no-whitespace-nested'
});
</script>

</dom-module>

<dom-module id="no-whitespace-binding">

  <template strip-whitespace>

    <div id="text">{{text}}</div>
    <div id="attr" attr$="{{attr}}">
      <div>A</div>
    </div>
    <div>
      <div>B</div>
    </div>
    <div id="compound"> {{a}} {{b}} </div>
  </template>

  <script type="module">
import { Polymer } from '../../polymer-legacy.js';
Polymer({
  properties: {
    text: {value: 'text'},
    attr: {value: 'attr'},
    a: {value: 'a'},
    b: {value: 'b'}
  },
  is: 'no-whitespace-binding'
});
</script>

</dom-module>

<dom-module id="no-whitespace-repeat">

  <template strip-whitespace>

    <template is="dom-repeat" items="[[items]]">
      <div></div>
    </template>

  </template>

  <script type="module">
import { Polymer } from '../../polymer-legacy.js';
Polymer({
  properties: {
    items: {
      value: function() { return [1, 2, 3];}
    }
  },
  is: 'no-whitespace-repeat'
});
</script>

</dom-module>



<script type="module">
import { flush } from '../../lib/utils/flush.js';

suite('polymer: template whitespace', function() {

  test('template stamped with whitespace preserved', function() {
    var el = document.createElement('has-whitespace');
    document.body.appendChild(el);
    assert.equal(el.root.childNodes.length, 5);
    assert.equal(el.root.childNodes[0].nodeType, Node.TEXT_NODE);
  });

  test('template stamped without whitespace when strip-template is used', function() {
    var el = document.createElement('no-whitespace');
    document.body.appendChild(el);
    assert.equal(el.root.childNodes.length, 3);
    assert.equal(el.root.childNodes.length, el.root.children.length);
  });

  test('template including style stamped without whitespace when strip-template is used', function() {
    var el = document.createElement('no-whitespace-style');
    document.body.appendChild(el);
    var c$ = Array.from(el.root.childNodes).filter(function(e) {
      return e.localName != 'style';});
    assert.equal(c$.length, 2);
  });

  test('template with nested content stamped without whitespace when strip-template is used', function() {
    var el = document.createElement('no-whitespace-nested');
    document.body.appendChild(el);
    assert.equal(el.root.childNodes.length, 2);
    assert.equal(el.root.childNodes.length, el.root.children.length);
    assert.equal(el.root.childNodes[0].childNodes.length, el.root.childNodes[0].children.length);
    assert.equal(el.root.childNodes[1].childNodes.length, el.root.childNodes[1].children.length);
  });

  test('template with nested content stamped without whitespace when strip-template is used', function() {
    var el = document.createElement('no-whitespace-binding');
    document.body.appendChild(el);
    assert.equal(el.$.text.textContent, 'text');
    assert.equal(el.$.attr.getAttribute('attr'), 'attr');
    assert.equal(el.$.compound.textContent, ' a b ');
  });

  test('template with dom-repeat stamped without whitespace when strip-template is used', function() {
    var el = document.createElement('no-whitespace-repeat');
    document.body.appendChild(el);
    flush();
    assert.equal(el.shadowRoot.childNodes.length, 4);
  });

});
</script>
</body>
</html>
